<template>
  <div>
    <filter-cmp @filter="handleFilter" @export="exportClick" />
    <div class="table">
      <el-tabs v-model="status" type="card" @tab-click="statusChangeClick">
        <el-tab-pane label="待审批" name="0" />
        <el-tab-pane label="已同意" name="1" />
        <el-tab-pane label="已拒绝" name="-1" />
      </el-tabs>
    </div>
    <div class="bottom">
      <el-table :data="orderList" style="width: 100%" :height="height">
        <el-table-column prop="customers_name" label="客户姓名" />
        <el-table-column prop="customers_phone" label="手机号" width="180" />
        <el-table-column label="商场" width="180">
          <template slot-scope="scope">
            <div>{{ scope.row.shop_id === 1 ? '全球家居1号店' : '欧丽洛雅吴中路商场' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="brand_name" label="品牌" width="180" />
        <el-table-column prop="designer_name" label="设计师" width="180" />
        <el-table-column label="状态" width="180">
          <template slot-scope="scope">
            <div>{{ scope.row.status === -1 ? '已拒绝' : scope.row.status === 0 ? '待审批' : '已同意' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="消费金额" width="180" v-if="status != 0" />
        <el-table-column v-if="status === '0'" prop="created_at" label="提交时间" width="180" />
        <el-table-column prop="updated_at" label="审核时间" width="180" v-if="status != 0" />
        <el-table-column
          v-if="status === '0' || status === '-1'"
          label="操作"
          fixed="right"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <div>
              <span v-if="status === '0'" class="col-blue" @click="approveClick(scope)">审批</span>
              <span v-if="status === '0'" class="col-red" @click="refuseClick(scope)">拒绝</span>
              <span v-if="status === '-1'" class="col-blue" @click="checkReason(scope)">查看拒绝理由</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dialog">
      <!-- 审批 -->
      <el-dialog
        title="编辑金额"
        :visible.sync="approveDialogVisible"
        :before-close="handleApproveClose"
        class="approveDialog"
      >
        <el-form ref="ruleForm" :model="passForm" label-width="120px">
          <el-form-item label="消费金额：">
            <el-input v-model="passForm.price" size="medium" />
            <span class="yuan">元</span>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="approveDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="passClick">通 过</el-button>
        </span>
      </el-dialog>
      <!-- 拒绝 -->
      <el-dialog
        title="拒绝理由"
        :visible.sync="refuseDialogVisible"
        :before-close="handleRefuseClose"
        class="approveDialog"
      >
        <el-form ref="ruleForm" :model="refuseForm" label-width="80px">
          <el-form-item label="理由:">
            <el-input
              v-model="refuseForm.reason"
              type="textarea"
              class="textarea"
              placeholder="请输入拒绝理由"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="refuseDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="refuseSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <Pagination
      class="pagination"
      :total="total"
      :cur-page="currentPage"
      @nextPage="hanldeNextPage"
    />
  </div>
</template>
<script>
import FilterCmp from "@/views/client/filter-cmp";
import Pagination from "@/common/pagination";
import Resize from "@/common/mixins/resize";
import { getCustomerOrderList, setPass, setRefuse } from "@/api/http/customer";
const ERR_OK = 200;
export default {
  components: {
    FilterCmp,
    Pagination
  },
  mixins: [Resize],
  data() {
    return {
      approveDialogVisible: false,
      refuseDialogVisible: false,
      passForm: {
        price: "",
        id: ""
      },
      refuseForm: {
        id: "",
        reason: ""
      },
      status: "0",
      tableData: [],
      defaultHeight: 340,
      orderList: null,
      total: 0,
      currentPage: 1,
      filterForm: {
        customers_name: "",
        customers_phone: "",
        designer_name: ""
      }
    };
  },
  created() {
    this._getCustomerOrderList({
      customers_id: this.$route.query.customers_id,
      status: this.status,
      page: this.currentPage
    });
  },
  methods: {
    // 导出excel
    exportClick() {
      window.location.href = `http://ddsc.izhixiu.cn/api/back/designer/exportCustomerOrder?customers_name=${this.filterForm.customers_name}&customers_phone=${this.filterForm.customers_phone}&designer_name=${this.filterForm.designer_name}&status=${this.status}&page=${this.currentPage}`;
    },
    handleFilter(filterForm) {
      this.filterForm = filterForm;
      this._getCustomerOrderList(
        Object.assign(filterForm, {
          page: this.currentPage,
          status: this.status,
          customers_id: this.$route.query.customers_id
        })
      );
    },
    checkReason(scope) {
      this.refuseDialogVisible = true;
      this.refuseForm.reason = scope.row.reason;
    },
    refuseSubmit() {
      this._setRefuse(this.refuseForm).then(res => {
        if (res.code === ERR_OK) {
          this.$message({
            message: "拒绝成功",
            showClose: true,
            type: "success"
          });
          this._getCustomerOrderList({
            status: this.status,
            page: this.currentPage,
            customers_id: this.$route.query.customers_id
          });
          this.refuseDialogVisible = false;
        }
      });
    },
    passClick() {
      if (!this.passForm.price) {
        this.$message({
          message: "请输入消费金额",
          showClose: true,
          type: "warning"
        });
        return;
      }
      this._setPass(this.passForm).then(res => {
        this.$message({
          message: "编辑成功"
        });
        this._getCustomerOrderList({
          status: this.status,
          page: this.currentPage,
          customers_id: this.$route.query.customers_id
        });
        this.approveDialogVisible = false;
      });
    },
    hanldeNextPage(page) {
      this.currentPage = page;
      this._getCustomerOrderList({
        status: this.status,
        page: this.currentPage,
        customers_id: this.$route.query.customers_id
      });
    },
    statusChangeClick() {
      this.orderList = [];
      this.currentPage = 1;
      this._getCustomerOrderList({
        status: this.status,
        page: this.currentPage,
        customers_id: this.$route.query.customers_id
      });
    },
    handleApproveClose() {
      this.approveDialogVisible = false;
    },
    approveClick(scope) {
      this.passForm.id = scope.row.id;
      this.approveDialogVisible = true;
    },
    handleRefuseClose() {
      this.refuseDialogVisible = false;
    },
    refuseClick(scope) {
      this.refuseForm.id = scope.row.id;
      this.refuseDialogVisible = true;
    },
    _getCustomerOrderList({
      customers_id,
      status,
      page,
      customers_name,
      customers_phone,
      designer_name
    }) {
      getCustomerOrderList({
        customers_id,
        status,
        page,
        customers_name,
        customers_phone,
        designer_name
      })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res);
            this.orderList = res.data.data;
            this.total = res.data.total;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    _setPass({ id, price }) {
      return setPass({ id, price })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res);
            return Promise.resolve(res);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    _setRefuse({ id, reason }) {
      return setRefuse({ id, reason })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res);
            return Promise.resolve(res);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/color.scss";
@import "@/styles/el-table.scss";
@import "@/styles/el-pagination.scss";
.yuan {
  position: absolute;
  top: 0;
  right: 7px;
  color: #101010 !important;
}
.el-form /deep/ .el-form-item__content {
  width: 200px;
}
.approveDialog /deep/ .el-dialog {
  width: 600px;
}
.textarea /deep/ .el-textarea__inner {
  width: 300px;
  min-height: 100px !important;
}
</style>
